<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,user-scalable=no">
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #000;
        }
        video, canvas {
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
  }
  .info{
        position: absolute;
        top:10px;
        left:20px;
        background-color:rgba(255,255,255,.5);
        min-width:200px;
        min-height:60px;
        z-index:1000;
        
  }
    </style>
    <script src="js/tracking-min.js"></script>
  <script src="js/data/face-min.js"></script>
    <script src="js/three.min.js"></script>
    <script src="js/vconsole.min.js"></script>
    <script src="js/example3.js"></script>
</head>
<body>
   <div class="info">
    <div id="alphaData"></div>
	<div id="betaData"></div>
	<div id="gammaData"></div>
    </div>
    <video id="video" width="320" height="240" preload autoplay loop muted></video>
    <canvas id="canvas" width="320" height="240"></canvas>
    <div id='container' style="width:100%;height: 100%;position: absolute;z-index: 2;"></div>
    <!-- <div style="display: flex;width:100%;height: 100%;position: absolute;top:0px;justify-content: space-evenly;z-index: -0;">
        <div style="width:10px;height:100%;background-color: #fff;"></div>
        <div style="width:10px;height:100%;background-color: #fff;"></div>
    </div> -->
</body>
<script>
/**
 * W3C标准APIDeviceOrientation，用于检测移动设备的旋转方向和加速度。通过这个API，我们可以获取到三个基础属性：

  alpha（设备平放时，水平旋转的角度）
  beta（设备平放时，绕横向X轴旋转的角度）
  gamma（设备平放时，绕纵向Y轴旋转的角度）
 */

function capture_orientation (event) { 
    var alpha = event.alpha; 
    var beta = event.beta; 
    var gamma = event.gamma; 
    console.log('Orientation - Alpha: '+alpha+', Beta: '+beta+', Gamma: '+gamma); 
    var alphaData = document.querySelector('#alphaData')
      alphaData.innerHTML = "水平旋转的角度:"+Math.round(alpha)
     //alphaData.innerHTML = "水平旋转的角度:"+alpha
    var betaData = document.querySelector('#betaData')
      betaData.innerHTML = "绕横向X轴旋转的角度"+Math.round(beta)
    // betaData.innerHTML = "绕横向X轴旋转的角度"+beta

    //var gammaData = document.querySelector('#gammaData')
      gammaData.innerHTML = "绕纵向Y轴旋转的角度"+Math.round(gamma)
     //gammaData.innerHTML = "绕纵向Y轴旋转的角度"+gamma

}

window.addEventListener('deviceorientation', capture_orientation, false);


//IOS设备上，这个API需要主动申请用户权限
/*window.DeviceOrientationEvent.requestPermission()
    .then(state => {
        switch (state) {
            case "granted":
                //在这里建立监听
                window.addEventListener('deviceorientation', capture_orientation, false);
                break;
            case "denied":
                alert("你拒绝了使用陀螺仪");
                break;
            case "prompt":
                alert("其他行为");
                break;
        }
});*/

//返回的是一个promise，所以你也可以这么写
/*var permissionState = await window.DeviceOrientationEvent.requestPermission();
if(permissionState=="granted")
	window.addEventListener('deviceorientation', capture_orientation, false);*/



</script>
</html>